<script lang="tsx">
/**
 * 图片
 */
export default {
  name: "image-form"
}
</script>

<script lang="tsx" setup>
import {ref, watch} from "vue"
import {uploadUrl} from "@/frame/config/upload.ts"
import {ElImage} from 'element-plus'

// 继承原生组件类型
type ElImageProps = InstanceType<typeof ElImage>['$props']
type ElImageEmits = InstanceType<typeof ElImage>['$emit']

/**
 * 定义props
 */
const props = defineProps<{
  src: string,
  lazy?: boolean,
  props?: ElImageProps,
  events?: ElImageEmits
}>()

/**
 * 图片实例
 */
const imageRef = ref<any>()

/**
 * 图片数据
 */
const imageData = ref()

/**
 * 预览
 */
const handleClick = () => {
  imageRef.value.showPreview()
}

/**
 * 监听
 */
watch(() => props, (newValue: any) => {
  if (newValue) {
    imageData.value = {
      ...newValue,
      src: newValue.src?.split("/Uploads")?.[1]
    }
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <el-image ref="imageRef" :props="props.props" :src="uploadUrl + imageData.src" lazy v-bind="$attrs"
            @click="handleClick"/>
</template>

<style lang="scss" scoped>

</style>
